<template>
<h2>reactive的使用</h2>
<h3>name:{{user.name}}</h3>
<h3>age:{{user.age}}</h3>
<h3>{{user}}</h3>
<h3>wife:{{user.wife}}</h3>
<hr>
<button @click="updateUser">更新数据</button>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'App',
  setup () {
    const obj: any = {
      name: '小明',
      age: 20,
      wife: {
        name: '小田田',
        age: 18,
        cars: ['宝马', '大众', '奥迪']
      }
    }
    const user = reactive(obj)
    const updateUser = () => {
      // obj.name = '小白'
      // user.name = '小红'
      // user.wife.name += '++'

      obj.gender = '男'
      console.log(obj)
      console.log(user)
      // user.sex = '女'
    }
    return {
      user,
      updateUser
    }
  }
})
</script>

<style>
</style>
